<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane>

        <span slot="label"> 志愿者列表</span>

        <nav-btn :sheet-header="xlsxHeader"
                 :sheet-list="_list"
                 xlsx-name="志愿者列表"
                 @search-method="handleGetSearchActivity"
        />

        <el-table :data="xlsxSheet"
                  border
                  max-height="680"
                  style="width: 100%">
          <el-table-column
              header-align="center"
              align="center"
              type="index"
          />
          <el-table-column
              align="center"
              header-align="center"
              v-for="(item ,index) in settings"
              :prop="index"
              :label="item"
              v-if="index!=='volunteerAvatar'"
              :key="item"
          />

          <el-table-column label="头像">
            <template slot-scope="scope">
              <img
                  :src="scope.row.volunteerAvatar"
                  alt="头像"
                  class="commodity-img"
              />
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="success"
                  @click="toEditVolunteerInfo(scope.row)"
              >编辑信息
              </el-button>

              <el-button
                  size="mini"
                  type="danger"
                  @click="handleToBlackList(scope.row)"
              >拉黑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10, 50, 100, 500, 1000, 99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivity"
            @current-change="handleGetByNumVolunteer"
        />
        <el-dialog
            :title="content ? '志愿者详情:' + content.volunteerName : ''"
            :visible.sync="Contentshow"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
          <el-card shadow="hover">
            <el-form ref="form" :model="EditorForm" label-width="110px">
              <el-form-item v-for="(item,index) in settings" :label="item" :key="item">
                <el-input v-model="EditorForm[index]" :placeholder="`请填写${item}`" />
              </el-form-item>
              <el-button type="primary" style="float: right" @click="handleSubmitNewInfo(EditorForm)">确认</el-button>
            </el-form>
          </el-card>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import NavBtn from "@/components/navBtn";

export default {
  components: { NavBtn },
  data () {
    return {
      list: [],
      currentPage: 1,
      keyword: "",
      currentPageSize: 10,
      total: 0,
      content: "",

      Contentshow: false,
      EditorForm: {

      },
      settings: {
       "volunteerName": "志愿者姓名",
       "volunteerIdentify": "身份证号",
       "volunteerAccount": "账户",
       "volunteerAddress": "地址",
       "volunteerSpecialty": "特长",
       "volunteerOccupation": "职业",
       "volunteerNo": "中国志愿者编号",
       "volunteerSex": "志愿者性别",
       "volunteerAge": "志愿者出生日期",
       "volunteerMobile": "志愿者手机号",
      },
    };
  },
  computed: {

    xlsxSheet () {
      const list = this.list;
      let _list = [];
      _list = list?.map(value => {
        return {
          "volunteerId": value?.volunteerId,
          "volunteerName": value?.volunteerName,
          "volunteerIdentify": value?.volunteerIdentify,
          "volunteerAccount": value?.volunteerAccount,
          "volunteerAddress": value?.volunteerAddress,
          "volunteerSpecialty": value?.volunteerSpecialty,
          "volunteerOccupation": value?.volunteerOccupation,
          "volunteerNo": value?.volunteerNo,
          "volunteerSex": value?.volunteerSex,
          "volunteerAge": value?.volunteerAge,
          "volunteerMobile": value?.volunteerMobile,
          "volunteerAvatar": value?.volunteerAvatar,
        };
      }) ?? [];

      return _list;
    },
    xlsxHeader () {
      const { settings } = this;
      return Object.values(settings);
    },
    _list () {
      const { xlsxSheet } = this;
      let _list = xlsxSheet.map(value => {
        return [Object.values(value)];
      });
      return _list.flat(1);
    },
  },

  mounted () {
    this.handleGetByNumVolunteer(1);
  },
  methods: {
    // 分页查询全部闲置
    async handleGetBySizeActivity (size) {
      let pageNum = this.currentPage;
      let pageSize = this.currentPageSize;
      pageSize = size;
      const res = await this.$http.volunteerGet({
        pageNum,
        pageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    //获取志愿者信息
    async handleGetActivityInfo () {
      this.articleContentshow = true;
      // console.log(params)
      // let res = await this.$http.volunteerGet(params)
      if (res.code !== 0) return null;
      this.content = res.data;
      // console.log(this.content)
    },
    // 分页查询全部活动
    async handleGetByNumVolunteer (num) {
      let pageNum = this.currentPage;
      let pageSize = this.currentPageSize;
      pageNum = num;
      // console.log(pageNum, pageSize)
      const res = await this.$http.volunteerGet({
        pageNum,
        pageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;

    },
    async handleGetVolunteer () {
      const res = await this.$http.volunteerGet({
        pageNum: this.currentPage,
        pageSize: this.currentSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    toEditVolunteerInfo (info) {
      console.log(`info-->`, info);
      this.Contentshow = true;
      this.content = {...info}
      this.EditorForm = {...info}
    },
    async handleToBlackList (info) {
      //  拉入黑名单
      const params = {
        "blacklistStatus": 1,
        "times": 1,
        "userid": info.volunteerId,
        "userinfo": info,
      };
      await this.$http.blacklistPost(params);
      // console.log(params)
    },
    handleGetSearchActivity (info) {
      let {
        content,
        dataRange,
      } = info;

      return this.searchByBoth(content, dataRange);

    },
    async searchByBoth (content, dataRange) {
      //  后端接口

      const res = await this.$http.volunteerAllBySearch(
          {
            from: dataRange ? dataRange[0] ?? "" : "",
            keywords: content ?? "",
            pageNum: this.currentPage ?? "",
            pageSize: this.currentPageSize ?? "",
            to: dataRange ? dataRange[1] ?? "" : "",
          },
      );
      if (res.code !== 0) return null;

      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    async handleSubmitNewInfo(form){
      console.log(`form-->`, form);
      const res = await this.$http.volunteerModify(form);
      if(res.code !== 0) return null;
       this.Contentshow = false;
      return this.handleGetByNumVolunteer(1);
    }
  },

};
</script>

<style lang="less" scoped>
.commodity-img {
  width: 40px;
}

.el-table {
  margin-top: 20px;
}

.row {
  margin-top: 20px;
}
</style>
